<template>
    <el-card class="layout-container">
        <template #header>
            <!-- 我希望按钮相对父组件显示在最右边 -->
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h3>任务情况</h3>
                <!-- <div style="    width: 100%;    text-align: right;"> -->
                <el-button size="default" round type="primary" @click="handlePublishScore">发布成绩</el-button>
            </div>
        </template>
        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :showSelection="true" :data="tableData"
                style="min-height: 400px;" @getTableData="getTableData" id="printContent">
                <el-table-column sortable label="Id" align="center" min-width="60px">
                    <template v-slot="{ row, $index }">
                        {{ calculateId($index) }}
                    </template>
                </el-table-column>
                <el-table-column sortable align="center" label="学号" width="auto">
                    <template v-slot="{ row }">
                        <span style="font-size: 15px;"> {{ row.user_id }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable align="center" label="姓名" width="auto">
                    <template v-slot="{ row }">
                        <span style="font-size: 15px;"> {{ row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="任务名称" width="auto">
                    <template v-slot="{ row }">
                        <span style="font-size: 15px;"> {{ row.task_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable align="center" label="提交状态" width="auto">
                    <template v-slot="{ row }">
                        <!-- <span style="font-size: 15px;color: {{ row.submitted === '已提交' ? 'green' : 'red' ;}}"> {{
                    row.submitted }}</span> -->
                    <el-tag :type="row.submitted === '已提交' ? 'primary' : 'info' " size="small"> {{ row.submitted }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column sortable align="center" label="批改状态" width="auto">
                    <template v-slot="{ row }">
                        <!-- <span style="font-size: 15px;color: {{ row.status === '已批改' ? 'green' : 'red' }}"> {{ row.status
                            }}</span>
                         -->
                         <el-tag :type="row.status === '待批改' ? 'info' : 'success' " size="small"> {{ row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column sortable align="center" label="分数" width="auto">
                    <template v-slot="{ row }">
                        <span style="font-size: 15px;"> {{ row.score }}/{{ row.max_score }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-slot="{ row, $index }" align="center" label="操作" width="auto">
                    <el-button type="primary" size="small" @click="handleCorrecting(row, $index)">批改</el-button>
                </el-table-column>
                <!-- <el-table-column sortable prop="name" align="center" label="姓名" width="auto" ></el-table-column>
                <el-table-column prop="task_name" align="center" label="任务名称" width="auto" />
                <el-table-column sortable prop="submitted" align="center" label="提交状态" width="auto" />
                <el-table-column sortable prop="status" align="center" label="批改状态" width="auto" />
                <el-table-column sortable prop="score" align="center" label="分数" width="auto" /> -->


            </Table>
        </div>


    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Page } from "@/components/table/type";
import { getTaskAssignmentsApi, sendDoTaskEmailApi } from "@/api/course";
import { ElMessage } from "element-plus";
import Table from "@/components/table/index.vue";
import { useRouter } from 'vue-router'
import { handlePublishScoreApi } from "@/api/task";


const props = defineProps({
    course_id: {
        type: Number,
        required: true
    },
    task_id: {
        type: Number,
        required: true
    },
});

const assignments = ref([]); // 存储作业列表
const router = useRouter()
// 分页参数, 供table使用
const page: Page = reactive({
    index: 1,
    size: 20,
    total: 0,
});

const loading = ref(true);
const tableData = ref([]); // 表格数据

const getTableData = (init: boolean) => {
    loading.value = true;
    if (init) {
        page.index = 1;
    }
    let params = {
        page: page.index,
        pageSize: page.size,
        course_id: props.course_id,
        task_id: props.task_id,
        task_type: "作业"
    };

    getTaskAssignmentsApi(params)
        .then((res: any) => {
            if (res.code === 200) {
                let data = res.data.data;
                page.total = res.data.total_size;

                data.forEach((d: any) => {
                    d.loading = false;
                });
                tableData.value = data;
            } else {
                console.error(res.message);
            }
        })
        .catch((error) => {
            console.error('发生错误:', error);
            tableData.value = [];
            page.index = 1;
            page.total = 0;
        })
        .finally(() => {
            loading.value = false;
        });
};

const handlePublishScore = () => {
    let params = {
        course_id: props.course_id,
        task_id: props.task_id,
        assignments: assignments.value.map(assignment => assignment.id)
    }
    handlePublishScoreApi(params)
        .then((res: any) => {
            if (res.code === 200) {
                ElMessage({
                    showClose: true,
                    message: '发布成功',
                    type: 'success',
                });
            } else {
                ElMessage({
                    showClose: true,
                    message: res.message,
                    type: 'info',
                });
            }
        })
        .catch((error) => {
            console.error('发生错误:', error);
        });
}
const calculateId = (index: number) => {
    // 根据 page、pagesize 和当前行的索引计算出 "Id" 列的值
    return (page.index - 1) * page.size + index + 1;
};

const handleSendDoTaskEmail = () => {
    const stuIds = tableData.value.map(item => item.user_id)
    const params = {
        course_id: props.course_id,
        task_id: props.task_id,
        stu_ids: stuIds
    }
    sendDoTaskEmailApi(params)

}

// 获取作业列表和表格数据
getTableData(true);
const handleCorrecting = (row: any, index: number) => {
    router.push({
        name: 'correct', state: {
            course_id: props.course_id,
            task_id: props.task_id,
            user_id: row.user_id,
            index: index,
            task_name: row.task_name,
            max_score: row.max_score,
        }
    })
};

</script>

<style lang="scss" scoped>
.statusName {
    margin-right: 10px;
}
</style>